<template>
  <view>
    <view class="header-bar">
      <wk-nav-bar
        :command-list="commandList"
        title="我的待办"
        @command="handleCommand" />
      <view class="content">
        <view class="tabs">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            :class="['tab', activeTab === index ? 'active' : '']"
            @click="switchTab(index)"
          >
            {{ tab }}
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <scroll-view :scroll-y="true" direction="vertical" :style="{height: pageHeight+'px'}">
        <view v-for="(item, index) in queryingList" :key="index" class="list-item" @click="goToPage(item.id,'/pages/inqueryDetail/inqueryDetail')">
          <view class="list-header">
            <text class="name">
              {{ item.title + '的询价' }}
            </text>
            <text class="status">
              {{ item.xjOrder }}
            </text>
          </view>
        </view>
      </scroll-view>
      <uni-pagination :style="{height: '50px'}" :total="page.total" :page-size="15" :current="page.current" title="标题文字" @change="changePage" />
    </view>
  </view>
</template>

<script>
  import { gysSrmXjOrderList } from 'API/quotePriceManagement'
	
  export default {
    data() {
      return {
        activeTab: 0,
        queryState: 3,
        page: {
          total: 50,
          pageSize: 15,
          current: 1
        },
        pageHeight: 0,
        commandList: [],
        queryingList: [],
        tabs: ['待报价', '待参与'], // '全部待办'
      }
    },
    computed: {
      params() {
        return {
          page: this.page.current,
          limit: 15
        }
      }
    },
    mounted() {
      this.getList()
      this.$nextTick(() => {
        let infos = uni
          .createSelectorQuery()
          .in(this)
          .select('.header-bar');
        infos
          .boundingClientRect(data => {
            this.headerBarHeight = data.height;
            let sysInfo = uni.getSystemInfoSync();
            // padding20px,分页50
            this.pageHeight = sysInfo.windowHeight - data.height - 20 - 50;
          })
          .exec();
      });
      // 监听窗口大小的变化
      uni.onWindowResize((res) => {
        console.log('ressss', res)
        this.pageHeight = res.size.windowHeight;
      });
    },
    methods: {
      goToPage(objId, url) {
        this.$Router.navigateTo({
          url: url,
          query: {
            objId: objId,
          }
        })
      },
      changePage(e) {
        // e.type = 'prev'/'next'
        this.params.page = e.current;
        this.getList()
      }, 
      submit() {},
      handleCommand() {},
      switchTab(index) {
        this.activeTab = index;
        // this.updatePageParams()
        // this.getList()
      },
      getList() {
        gysSrmXjOrderList({
			...this.params,
			objMap: {
				gysOrderState: this.queryState
			}
        }).then(res => {
          this.queryingList = res.data
        })
      },
    }
  }
</script>

<style scoped lang="scss">
	/* Tab 样式 */
	.tabs {
		margin-top: 10rpx;
	  display: flex;
	  background-color: #f5f5f5;
	}
	
	.tab {
	  flex: 1;
	  text-align: center;
	  padding: 10rpx 0;
	  color: #333;
	  font-size: 14px;
	  border-bottom: 2px solid transparent;
	}
	
	.tab.active {
	  color: #fff;
	  background-color: #007aff; /* 蓝色背景 */
	  border-bottom-color: #007aff;
	}
	
	/* 内容区域 */
	.content {
	  flex: 1;
	  padding: 20rpx;
	}
	
	/* 列表样式 */
	.list-item {
	  background: #fff;
	  margin-bottom: 10px;
	  padding: 10px;
	  border-radius: 8px;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}
	
	.list-header {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 5px;
	}
	
	.name {
	  font-size: 16px;
	  font-weight: bold;
	}
	
	.status {
	  color: #09bb07;
	}
	
	.list-body {
	  margin-bottom: 5px;
	  font-size: 14px;
	  color: #666;
	}
	
	.list-footer {
	  font-size: 12px;
	  color: #999;
	}
</style>
